/*
验证规则：
1.用户名以字母开头，不少于3位，只能包含数字、字母、_
1.1 英文字母 [A-Za-z]
1.2 包含数字、字母、_ \w
1.3 匹配开头^
1.4 次数 {3,}
2.邮箱。
^[A-Za-z0-9]\w+@\w{2,}\.[a-zA-Z]{2,4}
*/

const submit = document.getElementById('submit')
const usernameIpt = document.getElementById('username')

function valiUsername() {
    //获取用户名输入框的值
    const username = usernameIpt.value
    //生成用户名验证的正则对象
    const usernameReg = /^[A-Za-z]\w{2,}/
    //返回验证结果
    return usernameReg.test(username)
}

function valiEmail() {
    const iptEle = document.getElementById('email')
    const email = iptEle.value
    const emailReg = /^[A-Za-z0-9]\w+@\w{2,}\.[a-zA-Z]{2,4}/
    return emailReg.test(email)
}

submit.onclick = function (e) {
    //验证结果状态
    let valiRes = {
        username: valiUsername(),
        email: valiEmail()
    }
    let isPass = valiForm(valiRes)
    if (!isPass) {
        console.log('表单验证失败')
        //如果用户名验证失败
        e.preventDefault();//阻止提交按钮的默认行为，也就是阻止表单提交
    }
}


function valiForm(valiRes) {
    for (key in valiRes) {
        if (!valiRes[key]) {
            return false
        }
    }
    return true
}

// usernameIpt.oninput = function(){
//     console.log(this.value)
// }
usernameIpt.onchange = function(){
    console.log(this.value)
}


